<!--科室负责人-床位管理-->
<template>
  <div>
    <div style="padding-bottom: 50px">
      <div style="float: left;margin-left: 200px">
        <el-input
          placeholder="请输入内容"
          v-model="searchValue"
          clearable
          style="width: 300px" @change="searchChange">
        </el-input>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </div>
      <div style="float: left;margin-left: 50px">
        <el-select v-model="bedStatusValue" @change="selChange" clearable placeholder="按状态查询">
          <el-option key="0" value="0" label="空闲中"></el-option>
          <el-option key="1" value="1" label="使用中"></el-option>
          <el-option key="2" value="2" label="异常"></el-option>
        </el-select>
      </div>
      <div style="float: left;margin-left: 550px">
        <el-button type="primary" @click="showAdd">新增床位</el-button>
        <el-button @click="delSomeAdd" type="danger">批量删除</el-button>
      </div>
    </div>

    <!--表格数据-->
    <el-table
      :data="pageInfo.list"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55" prop="bid">
      </el-table-column>
      <el-table-column prop="bid" label="床位id"></el-table-column>
      <el-table-column prop="bnum" label="床位编号"></el-table-column>
      <el-table-column prop="tbHospital.hname" label="医院名称"></el-table-column>
      <el-table-column prop="tbDepartment.dname" label="科室名称"></el-table-column>
      <el-table-column prop="type" label="设备型号"></el-table-column>
      <el-table-column prop="manufacturerAddress" label="厂家联系地址"></el-table-column>
      <el-table-column prop="manufacturerPhone" label="厂家联系电话"></el-table-column>
      <el-table-column prop="manufacturerContacter" label="厂家联系人"></el-table-column>
      <el-table-column prop="addTime" label="添加时间"></el-table-column>
      <el-table-column prop="status" label="床位状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0" style="color: green">空闲中</span>
          <span v-if="scope.row.status == 1" style="color: #295fce">使用中</span>
          <span v-if="scope.row.status == 2" style="color: red">异常</span>
        </template>
      </el-table-column>
      <el-table-column label="操作项">
        <template slot-scope="scope">
          <el-button type="warning" plain @click="showUpdate(scope.row)" size="medium">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页导航-->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageNum"
        :page-sizes="[5, 15, 30, 50]"
        :page-size="pageInfo.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total">
      </el-pagination>
    </div>

    <!--模态框-->
    <el-dialog :title="title" :visible.sync="bedVisible">
      <el-form :model="bed" label-width="80px" class="demo-doctor">
        <el-form-item label="床位编号">
          <el-input v-model="bed.bnum"></el-input>
        </el-form-item>
        <el-form-item label="所属医院">
          <el-select v-model="bed.hid" placeholder="所属医院" default-first-option>
            <el-option
              :key="bed.tbHospital.id"
              :label="bed.tbHospital.hname"
              :value="bed.tbHospital.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属科室">
          <el-select v-model="bed.did" placeholder="所属科室" default-first-option>
            <el-option
              :key="bed.tbDepartment.did"
              :label="bed.tbDepartment.dname"
              :value="bed.tbDepartment.did">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备型号">
          <el-input v-model="bed.type"></el-input>
        </el-form-item>
        <el-form-item label="厂家联系地址">
          <el-input v-model="bed.manufacturerAddress"></el-input>
        </el-form-item>
        <el-form-item label="厂家联系电话">
          <el-input v-model="bed.manufacturerPhone"></el-input>
        </el-form-item>
        <el-form-item label="厂家联系人">
          <el-input v-model="bed.manufacturerContacter"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="execute()">提交</el-button>
          <el-button @click="bedVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>


</template>
<script>

import {getAllBed, search, showAdd, getBedById, execute, delSomeAdd} from "../api/sectionBed.js";

export default {
  data() {
    return {
      pageInfo: {
        pageNum: "1",
        pageSize: "5",
        total: "",
        list: []
      },
      bed: {tbHospital: {hname: '', id: ''}, tbDepartment: {dname: '', did: ''}},
      searchValue: '',
      bedStatusValue: '',
      bedVisible: false,
      title: '',
      sectionInfo: {},
      bids: []

    }
  },
  methods: {
    getAllBed() {
      getAllBed(
        {pageNum: this.pageInfo.pageNum, pageSize: this.pageInfo.pageSize, bedStatusValue: this.bedStatusValue}
      ).then(res => {
        if (res.data.msg == '没有数据') {
          this.pageInfo.list = ''
          this.pageInfo.total = ''
        } else {
          this.pageInfo.list = res.data.data.list;
          this.pageInfo.pageNum = res.data.data.pageNum;
          this.pageInfo.pageSize = res.data.data.pageSize;
          this.pageInfo.total = res.data.data.total;
        }
      })
    },
    //当前页发生改变
    handleCurrentChange(val) {
      this.pageInfo.pageNum = val;
      this.getAllBed();
    },
    //每页记录数发生改变
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.getAllBed();
    },
    //搜索框查询
    search() {
      search(
        {pageNum: this.pageInfo.pageNum, pageSize: this.pageInfo.pageSize, searchValue: this.searchValue}
      ).then(res => {
        if (res.data.msg == '没有数据') {
          this.pageInfo.list = ''
          this.pageInfo.total = ''
        } else {
          this.pageInfo.list = res.data.data.list;
          this.pageInfo.pageNum = res.data.data.pageNum;
          this.pageInfo.pageSize = res.data.data.pageSize;
          this.pageInfo.total = res.data.data.total;
        }
      })
    },
    //搜索框值改变
    searchChange() {
      if (this.searchValue == '') {
        this.getAllBed()
      }
    },
    //下拉框变化
    selChange() {
      this.getAllBed();
    },
    //显示增加模态框
    showAdd() {
      showAdd().then(res => {
        if (res.data.code == 200) {
          this.bed = {tbHospital: {hname: '', id: ''}, tbDepartment: {dname: '', did: ''}};
          this.title = '增加床位';
          this.bedVisible = true;
          this.bed.tbHospital.hname = res.data.data.tbHospital.hname;
          this.bed.tbHospital.id = res.data.data.tbHospital.id;
          this.bed.tbDepartment.dname = res.data.data.tbDepartment.dname;
          this.bed.tbDepartment.did = res.data.data.tbDepartment.did;
        }
      })
    },
    //显示修改模态框
    showUpdate(row) {
      getBedById(row.bid).then(res => {
        if (res.data.code == 200) {
          this.bed = res.data.data
          this.title = '修改床位';
          this.bedVisible = true;
        }
      })
    },
    //提交表单
    execute() {
      let url = ''
      if (this.bed.bid == undefined) {
        url = '/section/addBed'
      } else {
        url = '/section/updateBed'
      }
      execute(url, this.bed).then(res => {
        if (res.data.code == 200) {
          this.$message.success("操作成功")
        } else {
          this.$message.error("操作失败")
        }
        this.bedVisible = false;
        this.getAllBed();
      })
    },
    //复选框
    handleSelectionChange(val) {
      this.bids = []
      for (const valElement of val) {
        this.bids.push(valElement);
        //bids中的元素变为多个bed对象
      }
    },
    //批量删除
    delSomeAdd() {
      if (this.bids.length == 0) {
        this.$message.warning("请至少选择一项")
        return
      }
      for (let i = 0; i < this.bids.length; i++) {
        if (this.bids[i].status != '0') {
          this.$message.warning("勾选的床位必须处于空闲状态")
          return
        }
      }
      this.$confirm(
        '你确定要删除吗',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          for (let i = 0; i < this.bids.length; i++) {
            this.bids[i] = this.bids[i].bid;
            //bids中的元素变为多个bid
          }
          delSomeAdd(
            {bids: this.bids}
          ).then(res => {
            if (res.data.code == 200) {
              this.$message.success("操作成功")
            } else {
              this.$message.error("操作失败")
            }
            this.getAllBed();
          })
        }).catch(() => {

        }
      )
    }
  },
  created() {
    this.getAllBed()
  }
}
</script>

